<!-- 优惠券组件 -->
<template>
    <uiwu-popup>
        <view class="popup-coupons absolute bottom-0 left-0 right-0 bg-white" @tap.stop>
            <view class="header flex justify-between items-center">
                <text class="w-full text-xl text-white text-center pl-5">请选择充值优惠券</text>
                <icon type="cancel" :size="26" color="white" class="py-2 px-3" @click="close" />
            </view>
            <scroll-view scroll-y class="w-full">
                <radio-group name="" class="flex justify-center  w-full">
                    <view class="w-90 flex flex-wrap justify-between">
                        <view v-for="(item, index) in couponList" class="item relative mt-4"
                            :class="couponId == item.id ? 'active' : ''" :key="index" @tap.stop="selectCoupon(item)">
                            <view class="title absolute top-3 left-4">{{ item.coupon_price * 1 }}金币优惠券</view>
                            <view class="remark absolute top-12 left-4 py-1 px-2  rounded text-xs ">充值满{{
                                item.use_min_price
                                * 1
                            }}元可用
                            </view>
                            <radio @tap.stop="selectCoupon(item)" value="1" :checked="couponId == item.id"
                                color="#EF821E" class="w-6 h-6 absolute right-2 top-3" />
                        </view>
                    </view>
                </radio-group>
            </scroll-view>
            <Gap height="30rpx" />
            <view class="w-full flex justify-center">
                <view class="btns w-2/3 h-12 flex justify-center items-center text-white pb-1" @tap="useCoupons">确定使用
                </view>
            </view>
            <Gap height="100rpx"></Gap>
        </view>
    </uiwu-popup>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue';
import Gap from "@/components/gap.vue";
import { uiwu } from '@/api/interface/interface';
defineProps({
    couponList: {
        default: [],
        type: Object
    }
});
const emits = defineEmits(["update:modelValue", "updateCouponId"]);
const couponId = ref<string | number>(0);
const close = () => {
    emits("update:modelValue", false);
}

const selectCoupon = (item: any): void => {
    couponId.value = item.id
    emits("updateCouponId", item.id);
}

const useCoupons = () => {
    if (!couponId.value) return uiwu.toast('请选择需要使用的优惠券');
    emits("update:modelValue", false);
}

</script>

<style scoped lang="scss">
.popup-coupons {

    .header {
        background-color: rgba(35, 24, 21, 1);
    }

    .item {
        width: 160px;
        height: 84px;
        background: url("@/static/image/coupons-list.png") no-repeat;
        background-size: 100% 100%;
    }

    .remark {
        background-color: #F39C2A;
    }

    .btns {
        background-image: url("@/static/image/button.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}
</style>